//动态渲染
function dynamicList() {
  let mockData = [
    { text: '全部', tip: '身份证实名', special: 'false' },
    { text: '生活服务', tip: '银行卡', special: 'false' },
    { text: '金融科技', tip: '短信', special: 'false' },
    { text: '交通地理', tip: '天气', special: 'false'},
    { text: '充值缴费', tip: '短信', special: 'false'},
    { text: '数据智能', tip: '手机归属地', special: 'false'},
    { text: '企业工商', tip: 'IP', special: 'false'},
    { text: '应用开发', tip: '手机归属地', special: 'false'},
    { text: '电子商务', tip: 'IP', special: 'false'},
    { text: '吃喝玩乐', tip: '视频', special: 'false'},
    { text: '文娱视频', tip: '视频', special: 'false'},
    { text: '免费接口大全', tip: '短信', special: 'true'},
    { text: '短信', tip: '身份证实名', special: 'false'},
    { text: '汽车', tip: '银行卡', special: 'false'},
    { text: '核验', tip: '银行卡', special: 'false'},
    { text: '最新发布', tip: '银行卡', special: 'true'},
    { text: 'API私有化部署', tip: '身份证实名', special: 'true'},
  ]
  let lisss = document.querySelector('.APIsort')
  let strHtml = '<h1>API分类</h1>'
  for(let i = 0 ;i < mockData.length ; i++){
    strHtml += `<a href='' tip='${mockData[i].tip}'>${mockData[i].text}</a>`
  }
  lisss.innerHTML = strHtml

  // 点击事件实现页面渲染效果
  let text1 = document.querySelector('main p span')
  let text2 = document.querySelector('main p input')
  lisss.onclick=(e)=>{
    console.log(text1);
    console.log(text2);
    if(e.target.nodeName === 'A'){
      text1.textContent = e.target.textContent
      text2.placeholder = e.target.getAttribute('tip')
    }
    e.preventDefault()
  }
}
dynamicList()

//API分类
//鼠标移入移出
let ass = document.querySelectorAll('.APIsort a')
ass.forEach((a)=>{
  a.onmouseover=()=>{
    a.style.color='rgb(0,189,255)'
    a.style.border='1px solid rgb(0,189,255)'
  }
  a.onmouseout=()=>{
    a.style.color='#666'
    a.style.border='1px solid #ccc'
  }
})

// 点击事件实现页面渲染效果
// let text1 = document.querySelector('main p span')
// let text2 = document.querySelector('main p input')
// ass.forEach((a)=>{
//   a.onclick=(e)=>{
//     text1.textContent=a.textContent
//     text2.placeholder=a.getAttribute('tip')
//     e.preventDefault()
//   }
// })

//移入移出事件实现页面渲染效果
// let lis = document.querySelectorAll('main ul li')
// let on = document.querySelectorAll('main ul li button')

// lis.forEach((li,i)=>{
//   li.onmouseover=function(){
//     console.log(i);
//     on[i].classList.add('on')
//     li.style.paddingTop='40px'
//   }
//   li.onmouseout=function(){
//     on[i].classList.remove('on')
//     li.style.paddingTop='65px'
//   }
// })

// API展示部分动态渲染添加结构
let apiData = [
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
  ],
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
  ],
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
  ],
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
  ],
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
  ],
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
  ],
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
  ],
  [
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_03.jpg", title: '天气预报', price: '0', special: false },
      { src: "./images/API_02.jpg", title: '身份证实名认证', price: '￥0.2000/次', special: true },
      { src: "./images/API_05.jpg", title: '短信API服务', price: '￥0.0400/次', special: false },
      { src: "./images/API_01.jpg", title: '2021出行防疫政策指南', price: '0', special: false },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
      { src: "./images/API_04.jpg", title: '银行卡四元素校验', price: '￥0.3360/次', special: true },
  ],

]
function display(apiData) {
  let ul = document.querySelector('.api-content');
  let str = '';
  for (let i = 0; i < apiData.length; i++) {
      str += `
              <li>
                <a href="">
                  <img src="${apiData[i].src}" alt="">
                  <P class="api-title">${apiData[i].title}</P>
                  <p class="${apiData[i].price == 0 ? "green" : "red"}">${apiData[i].price == 0 ? "免费" : apiData[i].price}</p>
                </a>
              <div class="data">申请数据</div>
            `
          if (apiData[i].special) {
              str += `<span>企业专用</span>
              </li>`
          } else {
              `</li>`
          }
  }
  ul.innerHTML = str
}
display(apiData[0])

//分页器
function skipss(){
  let spans = document.querySelectorAll('main .skip>a');
  let xia = document.querySelector('main .skip .xia')
  let index = 0 
  spans.forEach((span, i) =>{
    span.onclick=function(e){
        console.log('111');
        //去掉之前的样式
        spans[index].classList.remove('on')
        //增加现在的样式
        this.classList.add('on')
        //给index赋值
        index = i
        // 调用函数
        display(apiData[index])
        e.preventDefault()
    }
  })
  //给下一页注册点击事件
  xia.onclick=() =>{
    spans[index].classList.remove('on')
    index ++;
    if(index===8){
        index = 7
    }
    spans[index].classList.add('on')
    display(apiData[index])
  }
}
skipss();

//分页器部分效果
// let lin = document.querySelectorAll('.skip>a')
// lin.forEach((li,i)=>{
//   li.onclick=()=>{
//     lin.forEach((li,i)=>{
//       li.classList.remove('on')
//     })
//     li.classList.add('on')
//   }
// })
// let xia = document.querySelector('.skip span a')
// xia.onclick=()=>{
//   let ins = document.querySelector('.skip .on')
//   let index = +ins.getAttribute('num')
//   lin[index].classList.remove('on')
//   index++
//   if(index===8){
//     index=7
//   }
//   lin[index].classList.add('on')
// }

// API展示部分动态效果
function apiPic() {
  let lis = document.querySelectorAll('.api-content li');
  let as = document.querySelectorAll('.api-content a');
  let datas = document.querySelectorAll('.api-content .data');
  //批量注册
  lis.forEach(function (li, i) {
      //注册鼠标移入事件
      li.onmouseover=()=>{
          console.log(1111);
          as[i].classList.add('active')
          datas[i].classList.add('on')
      }
  })
  lis.forEach(function (li, i) {
      //注册鼠标移出事件
      li.onmouseout=() =>{
          as[i].classList.remove('active')
          datas[i].classList.remove('on')
      }
  })
}
apiPic()
//拟态框
//拟态框点击切换页面内容
let button1 = document.querySelectorAll('.data')
let button2 = document.querySelector('.login-bg li:nth-child(1)>span')
let button3 = document.querySelector('.login-bg li:nth-child(3)>span')
let con1 = document.querySelector('.login-bg li:nth-child(1)>div')
let con2 = document.querySelector('.login-bg li:nth-child(3)>div')
let closes = document.querySelector('.login-screen>span')
let login = document.querySelector('.login-bg')
button1.forEach((li)=>{
  li.onclick=()=>{
    login.classList.add('on')
  }
})
button2.onclick=()=>{
  button2.classList.add('on')
  button3.classList.remove('on')
  con1.classList.remove('conceal')
  con2.classList.add('conceal')
}
button3.onclick=()=>{
  button3.classList.add('on')
  button2.classList.remove('on')
  con2.classList.remove('conceal')
  con1.classList.add('conceal')
}
closes.onclick=()=>{
  login.classList.remove('on')
}
//输入框效果
let urs= document.querySelector('.urs input')
let pwd= document.querySelector('.pwd input')
urs.oninput=()=>{
  if(urs.value.length)
    document.querySelector('.urs').classList.add('active')
  else
    document.querySelector('.urs').classList.remove('active')
}
pwd.oninput=()=>{
  if(pwd.value.length)
    document.querySelector('.pwd').classList.add('active')
  else
    document.querySelector('.pwd').classList.remove('active')
}

let close1 = document.querySelector('.urs>span')
let close2 = document.querySelector('.pwd>span')
close1.onclick=()=>{
  urs.value=''
}
close2.onclick=()=>{
  pwd.value=''
}

//提示框
let submit = document.querySelector('.login-screen button')
let popup = document.querySelectorAll('.tips p')
let timerId = null
submit.onclick=()=>{
  timerId = setTimeout(function(){
    popup.forEach((li)=>{
      li.classList.remove('on')
    })
  },2000)
  if(urs.value.length<6 || urs.value.length>20){
    popup[0].classList.add('on')
  }else if(pwd.value.length<6 || pwd.value.length>12){
    popup[1].classList.add('on')
  }else{
    popup[2].classList.add('on')
    timerId = setTimeout(function(){
      popup.forEach((li)=>{
        location='./index.html'
      })
    },2000)
  }
}

//点击跳转事件
let liss = document.querySelectorAll('.nav-item')
let logins = document.querySelector('.login')
let register = document.querySelector('.register')
function skip(){
  liss.forEach((li,i)=>{
    li.onclick=(()=>{
      if(i===0)
      window.location.replace('./index.html')
      if(i===1)
      window.location.replace('./API.html')
      if(i===2)
      window.location.replace('./customer.html')
    })
  })
  logins.onclick=()=>{location='./login.html'}
  register.onclick=()=>{location='./register.html'}
}
skip()
let apida = document.querySelectorAll('.api-content li a')
apida.forEach((li,i)=>{
  li.onclick=((e)=>{
    window.location.replace('./APIDetails.html')
    e.preventDefault()
  })
})
